import React, { useState, useEffect } from 'react';
import { connect } from "react-redux";
import { Button, InputNumber } from 'antd';
import { Set_CanvasStyleData } from '@store/actions/visualdrag';
import { setComponent, setCurrComp, setMenuShow } from '@/store/actions/visualdrag';
import Preview from './Editor/Preview';

const Pages = ({ canvasStyleData, componentData, dispatch }) => {
  // 改变画布大小
  const changeCanvasStyle = (val, type) => {
    let data = {
      ...canvasStyleData,
    }
    if (type == 'w') {
      data.width = val;
    } else {
      data.height = val;
    }
    dispatch(Set_CanvasStyleData(data))
  }
  // 清空画布
  const clearBtn = () => {
    let data = {
      index: null,
      component: null
    };
    dispatch(setCurrComp(data))
    dispatch(setComponent([]))
    dispatch(setMenuShow(false));
  }
  // 保存
  const saveBtn = () => {
    console.log(componentData);
    localStorage.componentData=JSON.stringify(componentData);
  }
  // 是否展示预览弹窗
  const [isPreview, setisPreview] = useState(false);

  return (
    <div>
      <div className="toolbar">
        <Button className="btn"
          onClick={() => clearBtn()}>清空画布</Button>
        <Button className="btn"
          onClick={() => saveBtn()}>保存</Button>
        <Button className="btn"
          onClick={() => setisPreview(true)}>预览</Button>
        <div>
          画布大小&nbsp;&nbsp;
          <InputNumber size="small"
            style={{ width: '80px' }}
            onChange={(val) => changeCanvasStyle(val, 'w')}
            defaultValue={canvasStyleData.width} />&nbsp;&nbsp;*&nbsp;&nbsp;
          <InputNumber size="small"
            style={{ width: '80px' }}
            onChange={(val) => changeCanvasStyle(val, 'h')}
            defaultValue={canvasStyleData.height} />
        </div>
      </div>

      {/* 预览 */}
      {
        isPreview &&
        <Preview
          setisPreview={setisPreview}
          componentData={componentData}
          canvasStyleData={canvasStyleData} />
      }
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    ...state.VisualDrag
  };
};

export default connect(mapStateToProps)(Pages);